<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const currentLang = ref(uni.getStorageSync('language') || 'zh')

// 计算当前是否是维吾尔语
const isUyghur = computed(() => currentLang.value === 'ug')

// 字体大小值（0-100）
const fontSizeValue = ref(uni.getStorageSync('fontSize') || 50)

// 字体大小预览文本
const previewText = computed(() => ({
  title: t('font.preview.title'),
  desc: t('font.preview.desc')
}))

// 字体大小标签
const fontSizeLabels = computed(() => ({
  small: t('font.size.small'),
  medium: t('font.size.medium'),
  large: t('font.size.large')
}))

const backClick = () => {
  uni.navigateBack()
}

// 更新字体大小
const updateFontSize = (value) => {
  fontSizeValue.value = value
  uni.setStorageSync('fontSize', value)
  const scale = 0.9 + (value / 100) * 0.4 // 从0.9到1.3
  uni.setStorageSync('fontScale', scale)
  uni.$emit('updateFontSize', value)
}

// 计算预览文本的样式
const previewStyle = computed(() => {
  const scale = 0.9 + (fontSizeValue.value / 100) * 0.4
  return {
    fontSize: `${28 * scale}rpx`
  }
})
</script>

<template>
  <tn-navbar backgroundColor="#fff" fixed>{{ t('font.title') }}
    <template #back>
      <tn-icon name="left" size="40" @click="backClick"></tn-icon>
    </template>
  </tn-navbar>

  <view class="font-page" :class="{ 'rtl': isUyghur }">
    <!-- 预览区域 -->
    <view class="preview-section">
      <view class="preview-btn">{{ t('font.preview.title') }}</view>
      <view class="preview-desc" :style="previewStyle">
        {{ t('font.preview.desc') }}
      </view>
    </view>

    <!-- 字体大小设置 -->
    <view class="font-size-section">
      <view class="size-labels">
        <text>{{ t('font.size.small') }}</text>
        <text>{{ t('font.size.medium') }}</text>
        <text>{{ t('font.size.large') }}</text>
      </view>
      <slider :value="fontSizeValue" @change="e => updateFontSize(e.detail.value)" min="0" max="100"
        activeColor="#0066ff" backgroundColor="#eee" block-size="28" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.font-page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;

  &.rtl {
    direction: rtl;
  }

  .preview-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 40rpx;

    .preview-btn {
      display: inline-block;
      padding: 16rpx 32rpx;
      background: #0066ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 12rpx;
      margin-bottom: 32rpx;
    }

    .preview-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
      width: 100%;
      box-sizing: border-box;
      min-height: 120rpx;
      transition: font-size 0.3s;
    }

    &.rtl .preview-desc {
      transform-origin: right top;
    }
  }

  .font-size-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 60rpx 32rpx;
    margin-top: auto;

    .size-labels {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding: 0 20rpx;

      text {
        font-size: 28rpx;
        color: #666;
      }
    }

    :deep(.uni-slider) {
      margin: 0;
    }
  }
}
</style>